<!DOCTYPE html>
<html lang="en" xmlns:th="https://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<div th:replace="common/common::html"></div>
<head>
    <meta charset="UTF-8">
    <title th:text="#{role.page.title}"></title>
    <link th:href="@{/assets/css/page.css}" rel="stylesheet"/>

    <script th:inline="javascript">
        var _gridWidth;
        var _gridHeight;
        //页面自适应
        function resizePageSize(){
            _gridWidth = $(document).width()-12;
            _gridHeight = $(document).height()-65 -40;
        }
        $(function () {
            resizePageSize();
            var _columnWidth = (_gridWidth-150)/3;
            $("#flexigrid-id").flexigrid({
                width : _gridWidth,
                height : _gridHeight,
                url : /*[[@{/role/queryRoleInfoListByPage}]]*/"",
                dataType : 'json',
                colModel : [
                    {display : 'roleUuid',name : 'roleUuid',width : 150,sortable : false,align : 'center',hide : 'true'},
                    {display : /*[[#{role.name}]]*/"",name : 'roleName',width : _columnWidth, sortable : true,align : 'center'},
                    {display : /*[[#{role.remarks}]]*/"",name : 'remarks',width : _columnWidth, sortable : true,align : 'center'},
                    {display : /*[[#{common.operation}]]*/"",name : 'roleUuid',width : _columnWidth, sortable : true,align : 'center',process: function(v,_trid,_row) {
                            var html = `<div>`
                            if([[${#authorization.expression("hasRole('ROLE_cldk_data_role_mod')")}]]) {
                                html += `<a href="#" class="btn" onclick="modifyRoleInfo('${v}')" title=[[#{common.modify}]]><i class="glyphicon glyphicon-pencil"></i></a>`
                            }
                            if([[${#authorization.expression("hasRole('ROLE_cldk_data_role_del')")}]]) {
                                html += `<a href="#" class="btn" onclick="deleteRoleInfo('${v}','${_row.roleName}')" title=[[#{common.delete}]]><i class="glyphicon glyphicon-trash"></i></a>`
                            }
                            if([[${#authorization.expression("hasRole('ROLE_cldk_data_role_menu')")}]]) {
                                html += `<a href="#" class="btn" onclick="allocatePermission('${v}')" title=[[#{user.allocate.permissions}]]><i class="glyphicon glyphicon-share"></i></a>`
                            }

                            html += `</div>`
                            return html;
                        }
                    },
                ],
                resizable : false,
                useRp : true,
                usepager : true,
                autoload : false,
                hideOnSubmit : true,
                showcheckbox : true,
                rowhandler : rowDbclick,
                rowbinddata : true
            });
            query()

            /**
             * 修改角色对话框
             */
            $("#modify-role-dialog-id").dialog({
                autoOpen : false,
                width : 400,
                modal : true,
                resizable : false,
                title: /*[[#{role.modify.dialog.title}]]*/'',
                buttons: [
                    {
                        text: /*[[#{common.confirm}]]*/'',
                        click: function() {
                            var flag = $("form#modify-role-form-id input.form-control").checkDom()
                            if(!flag) return
                            $("#modify-role-form-id").submit()
                        }
                    },
                    {
                        text: /*[[#{common.cancel}]]*/'',
                        click: function() {
                            $( this ).dialog( "close" );
                        }
                    }
                ]
            })

            /**
             * 修改角色异步表单
             */
            $("#modify-role-form-id").ajaxForm({
                dataType: "json",
                success : function(data) {
                    message(data.msg);
                    query();
                    if(data.success) {
                        $("#modify-role-dialog-id").dialog('close')
                    }
                },
                error : function() {
                    message(/*[[#{common.error}]]*/'');
                }
            })

            /**
             * 增加角色对话框
             */
            $("#add-role-dialog-id").dialog({
                autoOpen : false,
                width : 400,
                modal : true,
                resizable : false,
                title: /*[[#{role.add.dialog.title}]]*/'',
                buttons: [
                    {
                        text: /*[[#{common.confirm}]]*/'',
                        click: function() {
                            var flag = $("form#add-role-form-id input.form-control").checkDom()
                            if(!flag) return
                            $("#add-role-form-id").submit()
                        }
                    },
                    {
                        text: /*[[#{common.cancel}]]*/'',
                        click: function() {
                            $( this ).dialog( "close" );
                        }
                    }
                ]
            })

            /**
             * 增加角色异步表单
             */
            $("#add-role-form-id").ajaxForm({
                dataType: "json",
                success : function(data) {
                    message(data.msg);
                    query();
                    if(data.success) {
                        $("#add-role-dialog-id").dialog('close')
                    }
                },
                error : function() {
                    message(/*[[#{common.error}]]*/'');
                }
            })

            //删除角色对话框
            $("#delete-role-dialog-id").dialog({
                autoOpen : false,
                width : 400,
                modal : true,
                resizable : false,
                title: /*[[#{role.delete.dialog.title}]]*/'',
                buttons: [
                    {
                        text: /*[[#{common.confirm}]]*/'',
                        click: function() {
                            var ids =  $("#delete-role-dialog-id").attr("ids")
                            $.ajax({
                                type: 'post',
                                async: false,
                                dataType : 'json',
                                url: /*[[@{/role/deleteRoleByIds}]]*/'',
                                data: [{name:"ids",value:ids}],
                                success: function (data) {
                                    message(data.msg)
                                    if(data.success){
                                        $("#delete-role-dialog-id").dialog('close')
                                        query()
                                    }
                                },
                                error: function(msg){
                                    message(/*[[#{common.error}]]*/'');
                                }
                            });
                        }
                    },
                    {
                        text: /*[[#{common.cancel}]]*/'',
                        click: function() {
                            $( this ).dialog( "close" );
                        }
                    }
                ]
            });

            // 分配权限对话框
            $("#allocate-permission-dialog-id").dialog({
                autoOpen : false,
                width : 400,
                modal : true,
                resizable : false,
                title: /*[[#{role.allocat.permission.dialog}]]*/'',
                buttons: [
                    {
                        text: /*[[#{common.confirm}]]*/'',
                        click: function() {
                            let roleUuidArray = $("#allocate-permission-dialog-id").attr('ids')
                            let menuIdArray = []
                            let treeObj = $.fn.zTree.getZTreeObj("allocate-permission-ztree-id")
                            let nodes = treeObj.getCheckedNodes(true)
                            $(nodes).each(function (index,item) {
                                menuIdArray.push(item.id)
                            })
                            $.ajax({
                                type: 'post',
                                async: false,
                                dataType : 'json',
                                url: /*[[@{/role/saveRoleRefMenu}]]*/'',
                                data: [
                                    {name:"menuIdArray",value:menuIdArray},
                                    {name:"roleUuidArray",value:roleUuidArray},
                                ],
                                success: function (data) {
                                    message(data.msg)
                                    if(data.success) {
                                        $("#allocate-permission-dialog-id").dialog('close')
                                    }
                                },
                                error: function(msg){
                                    message(/*[[#{common.error}]]*/'');
                                }
                            })
                        }
                    },
                    {
                        text: /*[[#{common.cancel}]]*/'',
                        click: function() {
                            $( this ).dialog( "close" );
                        }
                    }
                ]
            })

        })


        function query() {
            var roleName = $("#role-name-id").val()
            $("#flexigrid-id").flexOptions({
                extParam:[
                    {name:"roleName",value:roleName}
                ]
            }).flexReload()
        }

        // 双击事件
        function rowDbclick(r){
            $(r).dblclick(function() {
                var columnsArray = $(r).attr('ch').split("_FG$SP_");
                var roleUuid = columnsArray[0]
                modifyRoleInfo(roleUuid)
            });
        }

        /**
         * 修改角色信息
         * @param roleUuid
         */
        function modifyRoleInfo(roleUuid) {
            $.ajax({
                type: 'post',
                async: false,
                dataType : 'json',
                url: /*[[@{/role/queryRoleInfoById}]]*/'',
                data: [{name:"roleUuid",value:roleUuid}],
                success: function (data) {
                    var list = $("form#modify-role-form-id input.form-control");
                    list.each(function (index,item) {
                        var name = $(item).attr("name")
                        $(this).val(data[name])
                    })
                    $("form#modify-role-form-id input.form-control").checkDom()
                    $("#modify-role-dialog-id").dialog('open')
                },
                error: function(msg){
                    message(/*[[#{common.error}]]*/'');
                }
            });
        }

        // 增加角色
        function addRole() {
            $("form#add-role-form-id input.form-control").removeClass('ui-state-error');
            $("#add-role-dialog-id").resetForm();
            $("#add-role-dialog-id").dialog('open')
        }

        //批量删除角色
        function bathDeleteRole() {
            var ids = $("#flexigrid-id").getFlexigridiAttrByIndex(0)
            if(ids.length === 0){
                message(/*[[#{common.empty}]]*/'');
                return;
            }
            $("#delete-role-dialog-id").attr('ids',ids)
            var niceNameArray = $("#flexigrid-id").getFlexigridiAttrByIndex(1)
            $("#delete-role-list-id").text(niceNameArray.join(","))
            $("#delete-role-dialog-id").dialog('open')
        }

        // 单独删除角色
        function deleteRoleInfo(roleUuid,roleName) {
            $("#delete-role-dialog-id").attr('ids',roleUuid)
            $("#delete-role-list-id").text(roleName)
            $("#delete-role-dialog-id").dialog('open')
        }

        var allocateSetting = {
            check: {
                enable: true
            },
            data: {
                simpleData: {
                    enable: true
                }
            }
        };




    </script>
</head>
<body>
<!-- 页面头部操作区 -->
<header>
    <div class="query">
        <input type="text" id="role-name-id" th:placeholder="#{role.name.plc}">
        <a href="#" class="btn-info btn" onclick="query()">
            <i class="glyphicon glyphicon-search"></i>
            <span th:text="#{common.query}"></span>
        </a>
        <a sec:authorize="hasRole('ROLE_cldk_data_role_add')" href="#" class="btn-info btn" onclick="addRole()">
            <i class="glyphicon glyphicon-plus"></i>
            <span th:text="#{common.add}"></span>
        </a>
        <a sec:authorize="hasRole('ROLE_cldk_data_role_del')" href="#" class="btn-info btn" onclick="bathDeleteRole()">
            <i class="glyphicon  glyphicon-trash"></i>
            <span th:text="#{common.delete}"></span>
        </a>
        <a sec:authorize="hasRole('ROLE_cldk_data_role_menu')" href="#" class="btn-info btn" onclick="bathAllocatePermission()">
            <i class="glyphicon  glyphicon-share"></i>
            <span th:text="#{user.allocate.permissions}"></span>
        </a>
    </div>
</header>

<!-- 角色列表表格 -->
<table id="flexigrid-id"></table>

<!-- 修改角色对话框 -->
<div id="modify-role-dialog-id" sec:authorize="hasRole('ROLE_cldk_data_role_mod')" style="display: none">
    <form id="modify-role-form-id" method="post" th:action="@{/role/modifyRoleInfoById}">
        <div class="form-group">
            <span th:text="#{role.uuid}"></span>
            <input class="form-control" name="roleUuid" readonly>
        </div>
        <div class="form-group">
            <span th:text="#{role.name}"></span>
            <input class="form-control" name="roleName" pattern="^.{4,}$">
        </div>
        <div class="form-group">
            <span th:text="#{role.remarks}"></span>
            <input class="form-control" name="remarks" pattern="^.+$">
        </div>
    </form>
</div>

<!-- 增加角色对话框 -->
<div id="add-role-dialog-id" sec:authorize="hasRole('ROLE_cldk_data_role_add')" style="display: none">
    <form id="add-role-form-id" method="post" th:action="@{/role/addRoleInfoById}">
        <div class="form-group">
            <span th:text="#{role.name}"></span>
            <input class="form-control" name="roleName"
                   th:placeholder="#{role.name.plc}"
                   pattern="^.{4,}$">
        </div>
        <div class="form-group">
            <span th:text="#{role.remarks}"></span>
            <input class="form-control" name="remarks"
                   th:placeholder="#{role.remarks.plc}"
                   pattern="^.+$">
        </div>
    </form>
</div>

<!-- 删除角色对话框 -->
<div id="delete-role-dialog-id" sec:authorize="hasRole('ROLE_cldk_data_role_del')" style="display: none">
    <span id="delete-role-list-id"></span>
</div>

<!-- 分配权限对话框 -->
<div id="allocate-permission-dialog-id" sec:authorize="hasRole('ROLE_cldk_data_role_menu')" style="display: none">
    <ul id='allocate-permission-ztree-id' class="ztree"></ul>
</div>



</body>
</html>